<!-- 能源消耗明细 -->
<template>

  <CommonDateSearch ref="searchRef1" @search="handleSearch" @export="handleExport">

  </CommonDateSearch>

  <div class="sub-content-box" v-loading="loading">
    <div style="width: 100%;text-align: right;margin-right: 15px;"> <a-button type="primary" @click="handleExport"
        :loading="exportLoading">导出</a-button></div>
    <div class="column-box">
      <div class="chart-box" v-for="item in lineTypeList" :key="item.dictCode">
        <Line style="height: 350px;" :is="item.componentName" :loading="item.loading" :chartData="item.chartData"
          :title="item.itemName" />

      </div>
      <div class="chart-box" v-for="item in COPList" :key="item.dictCode">
        <Line style="height: 350px;" :chartData="item.chartData" :title="item.itemName" />
      </div>
    </div>
    <div class="column-box">
      <div class="chart-box" v-for="item in pieTypeList" :key="item.dictCode">
        <Pie style="height: 350px;" v-if="pieTypeList.length > 0" :loading="item.loading" :chartData="item.chartData"
          :title="`${item.itemName}占比分析`" />
      </div>

    </div>
  </div>
</template>

<script setup>
import Pie from '@/components/Charts/Pie/index.vue'
import Line from '@/components/Charts/Line/index.vue'
import { ref, onMounted, watch, computed } from 'vue'
import { PageWrapper } from '@/components/Page'
import { getChartChildListData, getPieChartChildListData, getChartChildCopListData } from '@/api/common/chart'
import { getDictListByCode } from '@/api/sys/dict'
import CommonDateSearch from './CommonDateSearch.vue'
import { getBarData } from '@/api/carbon/calc'
import { GeneralExportData } from '@/api/common/chart.ts'
import {
  downloadByData,
} from '@/utils/file/download';

const searchRef1 = ref()
defineOptions({ name: 'Detail' })
const searchInfo = ref()
// const props = defineProps({
//   searchInfo: {
//     type: Object,
//     default: () => ({}),
//   },
// })

const dictCode = 'energy_consumption_of_air_conditioning_system'
const lineTypeList = ref([])
const pieTypeList = ref([])
const COPList = ref([
  // {
  //   chartData: {

  //     xaxisList: ["2024-01", "2024-02", "2024-03", "2024-04", "2024-05", "2024-06", "2024-07", "2024-08", "2024-09"],

  //     yaxisList: [{ name: "低温冷冻水系统补水", data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: "1807614130820083712" },{ name: "低冻水系统补水", data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0], stack: "1807614130820083712" }]
  //   },
  //   dictCode: "energy_consumption_of_air_conditioning_system_cop",
  //   itemName: "COP",
  // }
])
const chartList = ref([])
const dataReady = ref(false)
const exportLoading = ref(false)
const handleExport = async () => {
  searchInfo.value.dictCode = "energy_consumption_of_air_conditioning_system"
  searchInfo.value.itemName = "能源消耗明细"
  exportLoading.value = true
  const { data, headers } = await GeneralExportData(searchInfo.value)
  let contentDisposition = decodeURIComponent(headers["content-disposition"]);
  const filenameMatch = contentDisposition.match(/filename\*=UTF-8''(.+)|filename="(.+)"|filename=(.+)/)
  const fileName = filenameMatch[1] || filenameMatch[2] || filenameMatch[3]
  downloadByData(data, fileName);
  exportLoading.value = false
  message.success("导出成功");
}
const loading = computed(() => {
  return !dataReady.value
})

onMounted(async () => {
  await getTypeList()
  searchRef1.value.handleSearch()
})

const getTypeList = async () => {
  const res = await getDictListByCode(dictCode)
  dataReady.value = true
  lineTypeList.value = pieTypeList.value = res.map((item) => ({
    ...item,
    loading: true,
    chartData: [],
  }))
}
const handleSearch = async (params) => {
  if (dataReady.value) {
    searchInfo.value = params
    getLineChartData(params)
    getPieChartData(params)
    getChartChildDivListDatas(params)
  } else {
    setTimeout(() => {
      handleSearch(params)
    }, 1000)
  }

}
// watch(
//   () => searchInfo,
//   (newValue) => {
//     if (Object.values(newValue).length > 0) {
//       handleSearch(newValue)
//     }
//   },
//   { immediate: true },
// )
const getLineChartData = (searchInfo) => {
  lineTypeList.value.forEach((item) => {
    item.loading = true
    getChartChildListData({
      ...searchInfo,
      dictCode,
      itemName: item.itemName,
    })
      .then((res) => {
        console.log(res, "这是");

        item.chartData = res
      })
      .finally(() => {
        item.loading = false
      })
  })
}
const getPieChartData = (searchInfo) => {
  pieTypeList.value.forEach((item) => {
    item.loading = true
    getPieChartChildListData({
      ...searchInfo,
      dictCode,
      itemName: item.itemName,
    })
      .then((res) => {
        res.forEach(item => {
          item.label = {
            formatter: function (data) {
              return `${data.name} (${data.percent.toFixed(0)}%)`
            }
          }
        })
        item.chartData = res
      })
      .finally(() => {
        item.loading = false
      })
  })
}
const getChartChildDivListDatas = (searchInfo) => {
  getChartChildCopListData({
    ...searchInfo,
    dictCode: 'energy_consumption_of_air_conditioning_system_cop',
    itemName: 'COP',
  })
    .then((res) => {
      COPList.value = []

      COPList.value.push({ dictCode: "energy_consumption_of_air_conditioning_system_cop", chartData: res, loading: true, itemName: "COP" })





    })
    .finally(() => {
      COPList.value[0].loading = false
    })

}
</script>

<style scoped lang="scss">
.sub-content-box {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  /* overflow: auto; */

  .column-box {
    width: 50%;
    height: 100%;
  }

  .chart-box {
    /* flex-shrink: 0; */

    /* width: calc(100% / 3); */
    height: 32%;
    padding: 4px;
  }
}
</style>
